<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Form-password - UIkit tests</title>

        <script src="../_test.js"></script>
        <script src="../../src/js/components/form-password.js"></script>
    </head>

    <body>

        <div class="uk-container uk-container-center">

            <h1>Form password</h1>

            <form action="" class="uk-form" onsubmit="return false">

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-password">Password</label>
                    <div class="uk-form-controls">
                        <div class="uk-form-password">
                            <input id="form-password" type="password">
                            <a href="" class="uk-form-password-toggle" data-uk-form-password>Show</a>
                        </div>
                    </div>
                </div>

                <div class="uk-form-row">
                    <label class="uk-form-label" for="form-password-icon">Password icon. Notice the quotes: <pre><code>data-uk-form-password='{lblShow: "&lt;i class=\"uk-icon-eye\"&gt;&lt;/i&gt;", lblHide: "&lt;i class=\"uk-icon-eye-slash\"&gt;&lt;/i&gt;"}'</code></pre></label>
                    <div class="uk-form-controls">
                        <div class="uk-form-password">
                            <input id="form-password-icon" type="password">
                            <a href="" class="uk-form-password-toggle" data-uk-form-password='{lblShow: "<i class=\"uk-icon-eye\"></i>", lblHide: "<i class=\"uk-icon-eye-slash\"></i>"}'>
                                <i class="uk-icon-eye"></i>
                            </a>
                        </div>
                    </div>
                </div>

            </form>

        </div>

    </body>
</html>